<template>
  <section id="sys-login">
    <div class="main-content p-clear">
      <div class="center-container">
        <div class="bg-img p-clear">
          <div class="right-content p-right">
            <div class="right-login-box">
              <div class="login-content">
                <p class="skip-login">
                  <router-link to="/login">已有账号，直接登陆 >></router-link>
                </p>
                <div class="login-title">注册账号 l SIGN UP</div>
                <div class="regist-form">
                  <el-form :inline="true"
                           :model="formInline"
                           ref="formInline"
                           label-width="70px"
                           :rules="rules"
                           class="demo-form-inline">
                    <el-form-item label="账号"
                                  prop="accountName">
                      <el-input v-model="formInline.accountName"
                                placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名"
                                  prop="userName">
                      <el-input v-model="formInline.userName"
                                placeholder="真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"
                                  prop="passWord">
                      <el-input v-model="formInline.passWord"
                                placeholder="6-16位密码，区分大小写"></el-input>
                    </el-form-item>

                    <el-form-item label="部门"
                                  prop="deptName">
                      <el-input v-model="formInline.deptName"
                                placeholder="所属部门"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码"
                                  prop="confirmPwd"
                                  label-width="100px">
                      <el-input v-model="formInline.confirmPwd"
                                placeholder="确认密码"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码"
                                  prop="phone"
                                  label-width="100px">
                      <el-input v-model="formInline.phone"
                                placeholder="请输入手机号码"></el-input>
                    </el-form-item>

                    <el-form-item label="备注"
                                  prop="remark">
                      <el-input v-model="formInline.remark"
                                type="textarea"
                                rows="1"
                                placeholder="备注信息"></el-input>
                    </el-form-item>

                    <el-form-item class="register-btn">
                      <el-button class="reg-btn"
                                 @click="submitForm('formInline')">注册</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="leftboxText">
              <div class="left-login-box">
                <div class="llei-content">
                  <div class="imgpleLogo"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: 'register',
  data () {
    return {
      userName: '',
      passWord: '',
      checked: false,
      loading: false,
      errorTips: {
        userName: '',
        passWord: '',
        userId: ''
      },
      formInline: {
        accountName: '',
        userName: '',
        passWord: '',
        deptName: '',
        confirmPwd: '',
        phone: '',
        remark: ''

      },
      rules: {
        user: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/register.less";
</style>
<style lang="less">
.regist-form {
  width: 100%;
  .el-form-item {
    width: 48%;
    margin-bottom: 0px;
    .el-form-item__label {
      line-height: 40px;
    }
    .el-form-item__content {
      width: 85%;
      margin-left: 30px;
      line-height: 30px;
      .el-form-item__error {
        padding-top: 1px;
      }
    }
  }
  .el-input__inner {
    border-radius: 4px;
    height: 35px;
  }
  .register-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 20px 0;
    .reg-btn {
      padding: 10px 90px;
      border-radius: 15px;
      font-size: 16px;
      color: #fff;
      background: linear-gradient(
        90deg,
        rgba(87, 118, 226, 0.8),
        rgba(87, 118, 226, 0.9),
        rgba(130, 137, 242, 0.9)
      );
      box-shadow: 2px 2px 10px 3px rgba(109, 233, 248, 0.26);
    }
  }
}
</style>
